<script setup>
import '@wangeditor/editor/dist/css/style.css'
import { Plus } from '@element-plus/icons-vue'
import { useStyleTag } from '@vueuse/core'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { DomEditor } from '@wangeditor/editor'
import { ref, onMounted, onUnmounted, shallowRef, nextTick, computed } from 'vue'
import { useUserStore } from '@/stores'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  createAlumniEventService,
  updateAlumniEventService,
  getSingleAlumniEventService
} from '@/api/alumniEvent'
import { extractImgSrc, getEditorConfig, toolbarConfig } from '@/utils/editorSetting'
import { uploadImageService } from '@/api/upLoadImage'
import { useRoute, useRouter } from 'vue-router'
import { getAISummaryService } from '@/api/otherApi'
import DOMPurify from 'dompurify'
useStyleTag(
  `@import
  url("//at.alicdn.com/t/c/font_4833919_h3wd3db5h9.css");`,
  { id: 'iconfont_css_create_header' }
) // 唯一 ID 防止重复
// 引入组件
const __name = 'PublishActivityCopy'
defineOptions({
  name: __name
})
const userStore = useUserStore()
const logout = () => {
  // 清除用户信息
  userStore.clearUser()
  // 跳转到登录页，假设登录页路由为 '/login'
  router.push('/login')
}
const user = userStore.user
const header = ref(null)
const show_slide_header = ref(false)
const formFooter = ref(null) //引用底部表单区域
const showBackToTopBtn = ref(false) //显示回答顶部函数
const handleScroll = () => {
  //   const n = document.documentElement.scrollTop;
  const rect = header.value.getBoundingClientRect()
  show_slide_header.value = rect.bottom < 0 ? true : false
  const rect2 = formFooter.value.getBoundingClientRect()
  showBackToTopBtn.value = rect2.top < 300 ? true : false
  // console.table(rect2);
}
//滚动回顶部
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 平滑滚动
  })
}
//绑定滚动函数
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
// 头像弹出框
const showAvatarPopover = ref(false)
//消息
const showMessagePopover = ref(false)
const router = useRouter()
const route = useRoute()

const srcList = ref([
  'https://img0.baidu.com/it/u=2765486918,3196256426&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500',
  'https://img0.baidu.com/it/u=3292526101,1695607968&fm=253&fmt=auto&app=138&f=JPEG?w=888&h=500',
  'https://img0.baidu.com/it/u=981837662,3475465166&fm=253&fmt=auto&app=138&f=JPEG?w=767&h=500',
  'https://img2.baidu.com/it/u=3488937828,4231373097&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
  'https://img2.baidu.com/it/u=3630395879,3397381967&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
  'https://img1.baidu.com/it/u=1940910798,3008613493&fm=253&fmt=auto&app=120&f=JPEG?w=742&h=500',
  'https://img1.baidu.com/it/u=225457320,2085869623&fm=253&fmt=auto&app=120&f=JPEG?w=744&h=500',
  'https://img2.baidu.com/it/u=2712847950,1387365389&fm=253&fmt=auto&app=120&f=JPEG?w=656&h=500'
])
srcList.value = []

// 编辑器实例
const editorRef = shallowRef(null)
const valueHtml = ref('') // 存储编辑器内容
const mode = ref('default') // 编辑模式
const editorConfig = getEditorConfig(srcList, valueHtml) // 编辑器配置

//处理编辑器创建完成事件
const handleCreated = (editor) => {
  editorRef.value = editor
  // 正确获取工具栏配置的方式
  nextTick(() => {
    // console.log('编辑器菜单配置', editorConfig);
    const toolbar = DomEditor.getToolbar(editor)
    if (toolbar) {
      // console.log('所有可用工具栏按键:', editor.getAllMenuKeys());
      // console.log('当前工具栏配置:', toolbar.getConfig().toolbarKeys);
    }
  })
}
// 组件销毁时销毁编辑器实例
onUnmounted(() => {
  const editor = editorRef.value
  if (editor == null) {
    return
  }
  editor.destroy()
})

onMounted(async () => {
  nextTick(() => {
    const setting = editorRef.value.getMenuConfig('uploadImage') // 获取 uploadImage 的当前配置
    // console.log(' 打印当前图片上传配置', setting); // 打印当前配置
    // 滚动到card底部
    setTimeout(() => {
      if (formFooter.value) {
        formFooter.value.scrollIntoView({
          behavior: 'smooth',
          block: 'end'
        })
      }
    }, 100) // 100毫秒延迟确保内容加载完成
  })
})
const coverImageUrl = ref(
  'https://img0.baidu.com/it/u=2765486918,3196256426&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500'
)
coverImageUrl.value = ''

//点击切换封面图片
const switchCoverImage = (url) => {
  const newImgList = extractImgSrc(valueHtml.value)
  srcList.value = newImgList
  coverImageUrl.value = url
  ElMessage.success('切换封面成功')
}
// 计算纯文本字数（去除HTML标签）
const plainTextCount = computed(() => {
  if (!valueHtml.value) return 0
  // 方法1：使用DOM API（更准确）
  const tempDiv = document.createElement('div')
  tempDiv.innerHTML = valueHtml.value
  return tempDiv.textContent?.trim().length || 0
})

//处理图片上传
const previewUrlBlob = ref('')
const fileRaw = ref('')
//读取封面图片
const handlePreview = (file) => {
  console.log('文件', file)
  // 释放旧的URL（如果存在）
  if (previewUrlBlob.value) {
    URL.revokeObjectURL(previewUrlBlob.value)
  }
  fileRaw.value = file.raw
  // 生成临时预览URL
  previewUrlBlob.value = URL.createObjectURL(file.raw)
  coverImageUrl.value = previewUrlBlob.value
  console.log('加载了本地图片链接coverImageUrl', coverImageUrl.value)
}

// 实际服务器上传
const handleRealUpload = async () => {
  if (!fileRaw.value) {
    console.log('用户没有上传本地图片')
    return
  }

  const formData = new FormData()
  formData.append('img', fileRaw.value)

  try {
    const { data } = await uploadImageService(formData)
    console.log('上传成功图片URL:', data.data.url) // 正确的URL访问方式
    coverImageUrl.value = data.data.url
    // ElMessage.success(`上传成功！URL: ${data.data.url}`)
  } catch (error) {
    ElMessage.error('上传失败: ' + error.message)
  }
}

const params = ref({
  eventName: '',
  activityLocation: '',
  eventContent: '',
  summary: '',
  coverImageUrl: '',
  startTime: '',
  endTime: '',
  eventId: '',
  publishStatus: '' // 1表示已发布, 2表示草稿
})
// 活动名称
const eventName = ref('')

// 在script部分修改
const formModel = ref({
  summary: '',
  activityLocation: '',
  startTime: '',
  endTime: ''
})

const rules = {
  summary: [
    { required: true, message: '请输入活动摘要', trigger: 'blur' },
    { max: 256, message: '摘要长度不能超过256个字符', trigger: 'blur' }
  ],
  activityLocation: [
    { required: true, message: '请输入活动地点', trigger: 'blur' },
    { max: 256, message: '地点长度不能超过256个字符', trigger: 'blur' }
  ],
  startTime: [
    {
      required: true,
      message: '请选择开始时间',
      trigger: 'change'
    },
    {
      validator: (rule, value, callback) => {
        if (formModel.value.endTime && new Date(value) > new Date(formModel.value.endTime)) {
          callback(new Error('开始时间不能晚于结束时间'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ],
  endTime: [
    {
      required: true,
      message: '请选择结束时间',
      trigger: 'change'
    },
    {
      validator: (rule, value, callback) => {
        if (formModel.value.startTime && new Date(value) < new Date(formModel.value.startTime)) {
          callback(new Error('结束时间不能早于开始时间'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ]
}

const setEventRequestParams = () => {
  params.value.eventName = eventName.value
  params.value.coverImageUrl = coverImageUrl.value

  params.value.summary = formModel.value.summary
  params.value.activityLocation = formModel.value.activityLocation
  params.value.startTime = formModel.value.startTime
  params.value.endTime = formModel.value.endTime
  // params.value.eventContent = DOMPurify.sanitize(valueHtml.value)

  // 使用DOMPurify净化HTML内容
  params.value.eventContent = DOMPurify.sanitize(valueHtml.value, {
    USE_PROFILES: { html: true },
    ALLOWED_TAGS: [
      'p',
      'b',
      'i',
      'em',
      'strong',
      'a',
      'img',
      'br',
      'ul',
      'ol',
      'li',
      'h1',
      'h2',
      'h3',
      'h4',
      'h5',
      'h6'
    ],
    ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class', 'style'],
    FORBID_ATTR: ['on*']
  })

  // 使用DOMPurify净化HTML内容，添加FORBID_TAGS配置防止HTML实体被保留
  //  params.value.eventContent = DOMPurify.sanitize(valueHtml.value, {
  //   USE_PROFILES: { html: true },
  //   ALLOWED_TAGS: ['p', 'b', 'i', 'em', 'strong', 'a', 'img', 'br', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
  //   ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class', 'style'],
  //   FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'style'],
  //   FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover'],
  //   RETURN_DOM: false,
  //   RETURN_DOM_FRAGMENT: false,
  //   RETURN_TRUSTED_TYPE: false,
  //   ADD_ATTR: ['target'] // 允许target属性用于链接
  // })

  //去除空字符串的属性
  Object.keys(params.value).forEach((key) => {
    if (params.value[key] === '') {
      delete params.value[key]
    }
  })
}

function test() {
  console.log('测试', plainTextCount.value)
}
const additionalInfoForm = ref(null)

/**
 * 验证活动表单数据
 * @returns {Promise<boolean>} 返回验证是否通过
 */
const validateActivityForm = async () => {
  try {
    // 验证表单基础字段
    await additionalInfoForm.value.validate()

    // 标题校验
    if (eventName.value.length < 5) {
      ElMessage.error('标题至少需要5个字符')
      return false
    }

    // 内容校验
    if (!valueHtml.value || plainTextCount.value < 20) {
      ElMessage.error('活动内容至少需要20个字符')
      return false
    }

    // 封面校验
    if (!coverImageUrl.value) {
      ElMessage.error('请上传活动封面')
      return false
    }

    return true
  } catch (error) {
    console.error('表单验证过程中发生错误:', error)
    ElMessage.error('表单验证失败，请稍后再试')
    return false
  }
}

/**
 * 创建或更新校友活动
 */
const createAlumniEvent = async () => {
  try {
    // 验证表单数据
    const isValid = await validateActivityForm()
    if (!isValid) return

    // 处理上传和设置参数
    await handleRealUpload()
    setEventRequestParams()
    params.value.publishStatus = 1 // 1表示已发布
    console.log('发布按钮被点击，请求参数', params.value)

    // return
    // 根据是否有eventId决定是创建还是更新
    const serviceCall = route.query.eventId
      ? updateAlumniEventService(route.query.eventId, {
          ...params.value,
          eventId: route.query.eventId
        })
      : createAlumniEventService(params.value)

    const { data } = await serviceCall
    ElMessage.success(data.message || (route.query.eventId ? '活动修改成功' : '活动创建成功'))

    // 成功后跳转到活动管理页面
    setTimeout(() => {
      router.push('/activity-manage')
    }, 2000)
  } catch (error) {
    console.error('活动操作失败:', error)
    ElMessage.error('操作失败，请稍后再试')
  }
}

/**
 * 保存活动草稿
 */
const saveDraft = async () => {
  try {
    // 验证表单数据
    const isValid = await validateActivityForm()
    if (!isValid) return

    // 处理上传和设置参数
    await handleRealUpload()
    setEventRequestParams()

    // 设置草稿状态
    params.value.publishStatus = 2 // 2表示草稿

    // 根据是否有eventId决定调用创建还是更新服务
    const serviceCall = route.query.eventId ? updateAlumniEventService : createAlumniEventService

    let res
    if (route.query.eventId) {
      // 更新活动时，第一个参数是eventId，第二个参数是请求体
      res = await serviceCall(route.query.eventId, params.value)
    } else {
      // 创建活动时，直接传入请求体
      res = await serviceCall(params.value)
    }

    ElMessage.success(res.data.message || '草稿保存成功')

    // 成功后跳转到活动管理页面
    setTimeout(() => {
      router.push('/activity-manage')
    }, 2000)
  } catch (error) {
    console.error('保存草稿失败:', error)
    ElMessage.error('保存草稿失败，请稍后再试')
  }
}

// 回显文章数据
const loadArticle = async () => {
  if (!route.query.eventId) {
    return
  }

  const { data } = await getSingleAlumniEventService(route.query.eventId)
  // article.value = res.data;
  console.log('加载文章数据', data)

  // 更新表单数据
  formModel.value = {
    ...formModel.value,
    summary: data.summary,
    activityLocation: data.activityLocation,
    startTime: data.startTime,
    endTime: data.endTime
  }

  valueHtml.value = data.eventContent
  coverImageUrl.value = data.coverImageUrl
  eventName.value = data.eventName
  params.value = {
    ...params.value,
    eventId: data.eventId,
    publishStatus: data.publishStatus
  }

  // 加载图片列表（自动解码URL）
  const imgList = extractImgSrc(valueHtml.value)
  console.log('解码后的图片列表', imgList)
  srcList.value = imgList
}
loadArticle()

const summaryLoading = ref(false) // 摘要加载状态
const getAiSummary = async () => {
  summaryLoading.value = true
  try {
    // 检查内容是否为空
    if (!valueHtml.value || plainTextCount.value < 20) {
      ElMessage.error('活动内容至少需要20个字符')
      return
    }
    // 检查摘要是否已经存在,提示是否清空已写的摘要
    if (formModel.value.summary) {
      try {
        await ElMessageBox.confirm('摘要已存在，是否清空已写的摘要？', '确认清空摘要', {
          confirmButtonText: '清空',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        })
        // 用户点击清空，继续后续操作，可在此处添加清空摘要的代码
        formModel.value.summary = ''
      } catch (error) {
        // 用户点击取消，不做任何处理
      }
    }

    //获取纯文本
    const plainText = valueHtml.value.replace(/<[^>]+>/g, '') // 去除HTML标签
    const prompt = '提取上面的文字的摘要,不超过250字'
    const { data } = await getAISummaryService(plainText, prompt)
    console.log('获取到的摘要', data)
    formModel.value.summary = data.response.response
    ElMessage.success('摘要获取成功')
    summaryLoading.value = false
  } catch (error) {
    console.error('获取摘要失败:', error)
    ElMessage.error('获取摘要失败，请稍后再试')
  }
}
</script>

<template>
  <!-- 顶部l栏 -->
  <div class="bili_header" ref="header">
    <!-- <div :class="['header__bar',
      { 'slide_down': show_slide_header }]"> -->
    <div :class="['header__bar']">
      <ul class="left_entry">
        <li class="logo">
          <h1>
            <router-link to="/" target="_blank" rel="noopener noreferrer"
              >毕业生之家GradLink</router-link
            >
          </h1>
        </li>
        <li class="pub-container top-toolbal">
          <div class="top-toolbar-box">
            <a class="btn-back" href="/activity-manage">
              <i class="el_mcm-icon el-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                  <path
                    fill="currentColor"
                    d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
                  ></path>
                </svg>
              </i>
            </a>
            <span class="title">发布活动</span>
          </div>
        </li>
        <!-- <li class="create_center" v-show="show_slide_header === false">
          <router-link to="/activity-manage" rel="noopener noreferrer">
            <span>创作中心</span>
          </router-link>
        </li> -->
      </ul>

      <ul class="right_entry">
        <!-- 头像 -->
        <!-- <li class="v-popover-wrap header-avatar-wrap"
             @mouseenter="handleAvatarEnter"
                @mouseleave="handleAvatarLeave"> -->
        <li
          class="v-popover-wrap header-avatar-wrap"
          @mouseenter="showAvatarPopover = true"
          @mouseleave="showAvatarPopover = false"
        >
          <div
            :class="{
              'header-avatar-wrap--container': true,
              'mini-avatar--small': !showAvatarPopover,
              'mini-avatar--large': showAvatarPopover
            }"
          >
            <router-link
              class="header-entry-mini"
              to="/user-center"
              target="_blank"
              rel="noopener noreferrer"
            >
              <img :src="user.avatarUrl" alt="" />
            </router-link>
            <router-link
              class="header-entry-avatar"
              to="/user-center"
              target="_blank"
              rel="noopener noreferrer"
            >
              <div class="bili-avatar">
                <img class="bili_avatar_img" :src="user.avatarUrl" alt="" />
              </div>
            </router-link>
          </div>
          <div class="v-popover avatar-popover-is-bottom" v-show="showAvatarPopover">
            <!-- <div class="v-popover avatar-popover-is-bottom"
                 @mouseenter="clearCloseTimer"
                @mouseleave="startCloseTimer" 
                    v-show="showAvatarPopover"
                     > -->

            <div class="v-popover-content">
              <div class="avatar-panel-popover">
                <!-- 顶部留出空间给半个大头像占位 -->
                <div class="avatar-top-space"></div>
                <!-- 显示昵称 -->
                <div class="user-nickname">{{ user.nickName }}</div>
                <!-- 导航列表 -->
                <ul class="links-item">
                  <router-link
                    class="single-link-item"
                    to="/user-center"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <div class="link-title">
                      <svg
                        width="18"
                        height="18"
                        viewBox="0 0 18 18"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        class="link-icon"
                      >
                        <rect opacity="0.01" width="18" height="18" fill="white"></rect>
                        <path
                          d="M12.1146 9.48983C13.2763 8.63331 14.0299 7.2548 14.0299 5.7035C14.0299 3.11005 11.9198 1 9.32636 1C6.73291 1 4.62286 3.11005 4.62286 5.7035C4.62286 7.2548 5.37829 8.63331 6.53808 9.48983C3.87662 10.589 2 13.2118 2 16.2648C2 16.671 2.32901 17 2.73521 17C3.14141 17 3.47042 16.671 3.47042 16.2648C3.47042 13.0335 6.09879 10.407 9.3282 10.407C12.5576 10.407 15.186 13.0354 15.186 16.2648C15.186 16.671 15.515 17 15.9212 17C16.3274 17 16.6564 16.671 16.6564 16.2648C16.6546 13.2118 14.7761 10.589 12.1146 9.48983ZM6.09144 5.7035C6.09144 3.91878 7.54348 2.46858 9.32636 2.46858C11.1092 2.46858 12.5613 3.92062 12.5613 5.7035C12.5613 7.48639 11.1092 8.93843 9.32636 8.93843C7.54348 8.93843 6.09144 7.48639 6.09144 5.7035Z"
                          fill="#61666d"
                        ></path>
                      </svg>
                      <span>个人中心</span>
                    </div>
                    <svg
                      width="10"
                      height="10"
                      viewBox="0 0 9 9"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      class="link-icon--right"
                    >
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M7.50588 3.40623C7.40825 3.3086 7.24996 3.3086 7.15232 3.40623L4.41244 6.14612L1.67255 3.40623C1.57491 3.3086 1.41662 3.3086 1.31899 3.40623C1.22136 3.50386 1.22136 3.66215 1.31899 3.75978L4.11781 6.5586C4.28053 6.72132 4.54434 6.72132 4.70706 6.5586L7.50588 3.75978C7.60351 3.66215 7.60351 3.50386 7.50588 3.40623Z"
                        fill="currentColor"
                      ></path>
                      <path
                        d="M7.15232 3.40623L7.50588 3.75978L7.50588 3.75978L7.15232 3.40623ZM7.50588 3.40623L7.15232 3.75978L7.15233 3.75978L7.50588 3.40623ZM4.41244 6.14612L4.05888 6.49967C4.15265 6.59344 4.27983 6.64612 4.41244 6.64612C4.54504 6.64612 4.67222 6.59344 4.76599 6.49967L4.41244 6.14612ZM1.67255 3.40623L2.0261 3.05268L2.0261 3.05268L1.67255 3.40623ZM1.31899 3.40623L0.965439 3.05268L0.965439 3.05268L1.31899 3.40623ZM1.31899 3.75978L1.67255 3.40623V3.40623L1.31899 3.75978ZM4.11781 6.5586L3.76425 6.91215L4.11781 6.5586ZM4.70706 6.5586L4.35351 6.20505L4.70706 6.5586ZM7.50588 3.75978L7.15233 3.40623L7.15232 3.40623L7.50588 3.75978ZM7.50588 3.75978C7.40825 3.85742 7.24996 3.85742 7.15232 3.75978L7.85943 3.05268C7.56654 2.75978 7.09166 2.75978 6.79877 3.05268L7.50588 3.75978ZM4.76599 6.49967L7.50588 3.75978L6.79877 3.05268L4.05888 5.79257L4.76599 6.49967ZM1.31899 3.75978L4.05888 6.49967L4.76599 5.79257L2.0261 3.05268L1.31899 3.75978ZM1.67254 3.75979C1.57491 3.85742 1.41662 3.85742 1.31899 3.75979L2.0261 3.05268C1.73321 2.75978 1.25833 2.75978 0.965439 3.05268L1.67254 3.75979ZM1.67255 3.40623C1.77018 3.50386 1.77018 3.66215 1.67255 3.75978L0.965439 3.05268C0.672546 3.34557 0.672546 3.82044 0.965439 4.11334L1.67255 3.40623ZM4.47136 6.20505L1.67255 3.40623L0.965439 4.11334L3.76425 6.91215L4.47136 6.20505ZM4.35351 6.20505C4.38605 6.1725 4.43882 6.1725 4.47136 6.20505L3.76425 6.91215C4.12223 7.27013 4.70264 7.27013 5.06062 6.91215L4.35351 6.20505ZM7.15232 3.40623L4.35351 6.20505L5.06062 6.91215L7.85943 4.11334L7.15232 3.40623ZM7.15233 3.75978C7.05469 3.66215 7.05469 3.50386 7.15233 3.40623L7.85943 4.11334C8.15233 3.82045 8.15233 3.34557 7.85943 3.05268L7.15233 3.75978Z"
                        fill="currentColor"
                      ></path>
                    </svg>
                  </router-link>
                  <router-link
                    class="single-link-item"
                    to="/activity-manage"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <div class="link-title">
                      <i class="iconfont icon-huodong_huodongguanli link-icon"></i>
                      <span>活动管理</span>
                    </div>
                    <svg
                      width="10"
                      height="10"
                      viewBox="0 0 9 9"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      class="link-icon--right"
                    >
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M7.50588 3.40623C7.40825 3.3086 7.24996 3.3086 7.15232 3.40623L4.41244 6.14612L1.67255 3.40623C1.57491 3.3086 1.41662 3.3086 1.31899 3.40623C1.22136 3.50386 1.22136 3.66215 1.31899 3.75978L4.11781 6.5586C4.28053 6.72132 4.54434 6.72132 4.70706 6.5586L7.50588 3.75978C7.60351 3.66215 7.60351 3.50386 7.50588 3.40623Z"
                        fill="currentColor"
                      ></path>
                      <path
                        d="M7.15232 3.40623L7.50588 3.75978L7.50588 3.75978L7.15232 3.40623ZM7.50588 3.40623L7.15232 3.75978L7.15233 3.75978L7.50588 3.40623ZM4.41244 6.14612L4.05888 6.49967C4.15265 6.59344 4.27983 6.64612 4.41244 6.64612C4.54504 6.64612 4.67222 6.59344 4.76599 6.49967L4.41244 6.14612ZM1.67255 3.40623L2.0261 3.05268L2.0261 3.05268L1.67255 3.40623ZM1.31899 3.40623L0.965439 3.05268L0.965439 3.05268L1.31899 3.40623ZM1.31899 3.75978L1.67255 3.40623V3.40623L1.31899 3.75978ZM4.11781 6.5586L3.76425 6.91215L4.11781 6.5586ZM4.70706 6.5586L4.35351 6.20505L4.70706 6.5586ZM7.50588 3.75978L7.15233 3.40623L7.15232 3.40623L7.50588 3.75978ZM7.50588 3.75978C7.40825 3.85742 7.24996 3.85742 7.15232 3.75978L7.85943 3.05268C7.56654 2.75978 7.09166 2.75978 6.79877 3.05268L7.50588 3.75978ZM4.76599 6.49967L7.50588 3.75978L6.79877 3.05268L4.05888 5.79257L4.76599 6.49967ZM1.31899 3.75978L4.05888 6.49967L4.76599 5.79257L2.0261 3.05268L1.31899 3.75978ZM1.67254 3.75979C1.57491 3.85742 1.41662 3.85742 1.31899 3.75979L2.0261 3.05268C1.73321 2.75978 1.25833 2.75978 0.965439 3.05268L1.67254 3.75979ZM1.67255 3.40623C1.77018 3.50386 1.77018 3.66215 1.67255 3.75978L0.965439 3.05268C0.672546 3.34557 0.672546 3.82044 0.965439 4.11334L1.67255 3.40623ZM4.47136 6.20505L1.67255 3.40623L0.965439 4.11334L3.76425 6.91215L4.47136 6.20505ZM4.35351 6.20505C4.38605 6.1725 4.43882 6.1725 4.47136 6.20505L3.76425 6.91215C4.12223 7.27013 4.70264 7.27013 5.06062 6.91215L4.35351 6.20505ZM7.15232 3.40623L4.35351 6.20505L5.06062 6.91215L7.85943 4.11334L7.15232 3.40623ZM7.15233 3.75978C7.05469 3.66215 7.05469 3.50386 7.15233 3.40623L7.85943 4.11334C8.15233 3.82045 8.15233 3.34557 7.85943 3.05268L7.15233 3.75978Z"
                        fill="currentColor"
                      ></path>
                    </svg>
                  </router-link>
                  <router-link
                    class="single-link-item"
                    to="/activity-manage/my-registrations"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <div class="link-title">
                      <i class="iconfont icon-wodebaoming1 link-icon"></i>
                      <span>我的报名</span>
                    </div>
                    <svg
                      width="10"
                      height="10"
                      viewBox="0 0 9 9"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      class="link-icon--right"
                    >
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M7.50588 3.40623C7.40825 3.3086 7.24996 3.3086 7.15232 3.40623L4.41244 6.14612L1.67255 3.40623C1.57491 3.3086 1.41662 3.3086 1.31899 3.40623C1.22136 3.50386 1.22136 3.66215 1.31899 3.75978L4.11781 6.5586C4.28053 6.72132 4.54434 6.72132 4.70706 6.5586L7.50588 3.75978C7.60351 3.66215 7.60351 3.50386 7.50588 3.40623Z"
                        fill="currentColor"
                      ></path>
                      <path
                        d="M7.15232 3.40623L7.50588 3.75978L7.50588 3.75978L7.15232 3.40623ZM7.50588 3.40623L7.15232 3.75978L7.15233 3.75978L7.50588 3.40623ZM4.41244 6.14612L4.05888 6.49967C4.15265 6.59344 4.27983 6.64612 4.41244 6.64612C4.54504 6.64612 4.67222 6.59344 4.76599 6.49967L4.41244 6.14612ZM1.67255 3.40623L2.0261 3.05268L2.0261 3.05268L1.67255 3.40623ZM1.31899 3.40623L0.965439 3.05268L0.965439 3.05268L1.31899 3.40623ZM1.31899 3.75978L1.67255 3.40623V3.40623L1.31899 3.75978ZM4.11781 6.5586L3.76425 6.91215L4.11781 6.5586ZM4.70706 6.5586L4.35351 6.20505L4.70706 6.5586ZM7.50588 3.75978L7.15233 3.40623L7.15232 3.40623L7.50588 3.75978ZM7.50588 3.75978C7.40825 3.85742 7.24996 3.85742 7.15232 3.75978L7.85943 3.05268C7.56654 2.75978 7.09166 2.75978 6.79877 3.05268L7.50588 3.75978ZM4.76599 6.49967L7.50588 3.75978L6.79877 3.05268L4.05888 5.79257L4.76599 6.49967ZM1.31899 3.75978L4.05888 6.49967L4.76599 5.79257L2.0261 3.05268L1.31899 3.75978ZM1.67254 3.75979C1.57491 3.85742 1.41662 3.85742 1.31899 3.75979L2.0261 3.05268C1.73321 2.75978 1.25833 2.75978 0.965439 3.05268L1.67254 3.75979ZM1.67255 3.40623C1.77018 3.50386 1.77018 3.66215 1.67255 3.75978L0.965439 3.05268C0.672546 3.34557 0.672546 3.82044 0.965439 4.11334L1.67255 3.40623ZM4.47136 6.20505L1.67255 3.40623L0.965439 4.11334L3.76425 6.91215L4.47136 6.20505ZM4.35351 6.20505C4.38605 6.1725 4.43882 6.1725 4.47136 6.20505L3.76425 6.91215C4.12223 7.27013 4.70264 7.27013 5.06062 6.91215L4.35351 6.20505ZM7.15232 3.40623L4.35351 6.20505L5.06062 6.91215L7.85943 4.11334L7.15232 3.40623ZM7.15233 3.75978C7.05469 3.66215 7.05469 3.50386 7.15233 3.40623L7.85943 4.11334C8.15233 3.82045 8.15233 3.34557 7.85943 3.05268L7.15233 3.75978Z"
                        fill="currentColor"
                      ></path>
                    </svg>
                  </router-link>
                  <div class="split-line"></div>
                  <div class="logout-item" @click.prevent="logout">
                    <svg
                      width="18"
                      height="18"
                      viewBox="0 0 18 18"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      class="link-icon"
                    >
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M17.6137 9.30115C17.6932 9.10837 17.6932 8.89282 17.6137 8.70004C17.5743 8.60393 17.5165 8.51726 17.4443 8.44504L15.2221 6.22282C14.9148 5.9156 14.4176 5.91615 14.111 6.22282C13.8043 6.52948 13.8037 7.02671 14.111 7.33393L14.9921 8.21504L7.99985 8.21504C7.56596 8.21448 7.21429 8.56615 7.21429 9.00059C7.21429 9.21726 7.30207 9.41393 7.44429 9.55615C7.58651 9.69837 7.78318 9.78615 7.99985 9.78615L14.9921 9.78615L14.111 10.6673C13.8043 10.9739 13.8037 11.4712 14.111 11.7784C14.4182 12.0856 14.9154 12.085 15.2221 11.7784L17.4443 9.55615C17.5165 9.48393 17.5743 9.39726 17.6137 9.30115"
                        fill="#61666d"
                      ></path>
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M11.8889 5.11111C9.74127 2.96349 6.25873 2.96349 4.11111 5.11111C1.96349 7.25873 1.96349 10.7413 4.11111 12.8889C6.25873 15.0365 9.74127 15.0365 11.8889 12.8889C12.1957 12.5821 12.6932 12.5821 13 12.8889C13.3068 13.1957 13.3068 13.6932 13 14C10.2387 16.7613 5.76127 16.7613 3 14C0.238731 11.2387 0.23873 6.76127 3 4C5.76127 1.23873 10.2387 1.23873 13 4C13.3068 4.30683 13.3068 4.80429 13 5.11111C12.6932 5.41794 12.1957 5.41794 11.8889 5.11111Z"
                        fill="#61666d"
                      ></path>
                    </svg>
                    <span>退出登录</span>
                  </div>
                </ul>
              </div>
            </div>
          </div>
        </li>
        <!-- 消息 -->
        <li
          class="v-popover-wrap right-entry--message right-entry__outside"
          @mouseenter="showMessagePopover = true"
          @mouseleave="showMessagePopover = false"
        >
          <div class="red-num--message">2</div>
          <router-link
            title="消息中心"
            to="/message-center/replies"
            target="_blank"
            class="right-entry__outside"
          >
            <svg
              width="20"
              height="20"
              viewBox="0 0 20 20"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              class="right-entry-icon"
            >
              <path
                d="M15.435 17.7717H4.567C2.60143 17.7717 1 16.1723 1 14.2047V5.76702C1 3.80144 2.59942 2.20001 4.567 2.20001H15.433C17.3986 2.20001 19 3.79943 19 5.76702V14.2047C19.002 16.1703 17.4006 17.7717 15.435 17.7717ZM4.567 4.00062C3.59327 4.00062 2.8006 4.79328 2.8006 5.76702V14.2047C2.8006 15.1784 3.59327 15.9711 4.567 15.9711H15.433C16.4067 15.9711 17.1994 15.1784 17.1994 14.2047V5.76702C17.1994 4.79328 16.4067 4.00062 15.433 4.00062H4.567Z"
                fill="currentColor"
              ></path>
              <path
                d="M9.99943 11.2C9.51188 11.2 9.02238 11.0667 8.59748 10.8019L8.5407 10.7635L4.3329 7.65675C3.95304 7.37731 3.88842 6.86226 4.18996 6.50976C4.48954 6.15544 5.0417 6.09699 5.4196 6.37643L9.59412 9.45943C9.84279 9.60189 10.1561 9.60189 10.4067 9.45943L14.5812 6.37643C14.9591 6.09699 15.5113 6.15544 15.8109 6.50976C16.1104 6.86409 16.0478 7.37731 15.6679 7.65675L11.4014 10.8019C10.9765 11.0667 10.487 11.2 9.99943 11.2Z"
                fill="currentColor"
              ></path>
            </svg>
            <span class="right-entry-text">消息</span>
          </router-link>
          <div class="v-popover message-popover-is-bottom" v-show="showMessagePopover">
            <div class="v-popover-content">
              <div class="message-entry-popover">
                <div class="message-inner-list">
                  <router-link
                    class="message-inner-list__item"
                    to="/message-center/replies"
                    target="_blank"
                  >
                    回复我的
                    <span class="message-inner-list__item--num">2</span>
                  </router-link>
                  <router-link
                    class="message-inner-list__item"
                    to="/message-center/likes"
                    target="_blank"
                  >
                    收到的赞
                    <span class="message-inner-list__item--num">2</span>
                  </router-link>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <div class="editor_toolbar_container">
    <Toolbar
      :class="['editor-toolbar', { slide_down: show_slide_header }]"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
  </div>
  <!-- <textarea class="hidden_zone" :value="valueHtml" name="" id=""></textarea> -->

  <div class="editor-container">
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 主要内容 -->
      <div class="content-container">
        <!-- 标题输入 -->
        <div class="el_mcm-form-item__content" style="margin-left: 0px">
          <!---->
          <div class="pos-box">
            <pre class="input__title_pre">【无标题】</pre>
            <div class="el_mcm-textarea input__title">
              <textarea
                v-model.trim="eventName"
                class="el_mcm-textarea__inner"
                maxlength="100"
                tabindex="0"
                autocomplete="off"
                placeholder="请输入文章标题（5～100个字）"
                rows="2"
                style="min-height: 32px; resize: none"
                id="txtTitle"
              >
              </textarea>
            </div>
            <span class="title-chk" v-if="eventName.length <= 4"
              >还需输入<span class="need-more">{{ 5 - eventName.length }}</span
              >个字
            </span>
            <span class="title-chk" v-else
              ><span class="title-num">{{ eventName.length }}</span> / 100
            </span>
          </div>
        </div>
        <!-- <div class="divider"></div> -->

        <!-- 富文本编辑器 -->
        <Editor
          class="editor-content"
          v-model="valueHtml"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="handleCreated"
        />
      </div>

      <!-- 底部填充表单 -->
      <div class="footer_container" ref="formFooter">
        <!-- <el-button class="save-btn" type="primary" size="large" @click="test">上传真正的图片</el-button> -->
        <el-form
          class="additional_info"
          ref="additionalInfoForm"
          :model="formModel"
          :rules="rules"
          label-width="120px"
          label-position="right"
        >
          <!-- 封面 -->
          <el-form-item label="添加封面" required>
            <div class="cover_right">
              <el-upload
                class="preview_box"
                :auto-upload="false"
                :show-file-list="false"
                :on-change="handlePreview"
              >
                <template #trigger>
                  <div class="upload-area">
                    <div class="upload-placeholder" v-if="!coverImageUrl">
                      <el-icon :size="30">
                        <Plus />
                      </el-icon>
                      <span class="upload-text">从本地上传</span>
                    </div>
                    <img class="cover-preview" v-else :src="coverImageUrl" />
                  </div>
                </template>
              </el-upload>

              <div class="img-selection-box">
                <div
                  class="img-selection-list"
                  :style="{ 'overflow-x': srcList.length > 5 ? 'scroll' : 'auto' }"
                >
                  <p v-if="srcList.length <= 0" class="no-data">暂无内容图片，请在正文中添加图片</p>
                  <div
                    v-else
                    class="img-selection-item"
                    @click="switchCoverImage(item)"
                    v-for="(item, index) in srcList"
                    :key="index"
                  >
                    <el-image
                      :src="item"
                      :zoom-rate="1.2"
                      :max-scale="7"
                      :min-scale="0.2"
                      :preview-teleported="true"
                      :preview-src-list="srcList"
                      show-progress
                      :initial-index="index"
                      fit="cover"
                    />
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>

          <!-- 摘要 -->
          <el-form-item label="文章摘要" prop="summary">
            <div class="summary_input">
              <el-input
                type="textarea"
                autosize
                class="summary_input_inner"
                v-model.trim="formModel.summary"
                :rows="3"
                placeholder="请输入活动简介（最多256字）"
                maxlength="256"
                show-word-limit
              />
              <el-button :loading="summaryLoading" class="summary_btn" @click="getAiSummary">
                一键提取</el-button
              >
            </div>
          </el-form-item>

          <!-- 活动时间 -->
          <el-form-item label="活动时间" required>
            <!-- <div class="time_range_picker">
              <el-date-picker v-model="startTime" type="datetime" placeholder="开始时间" format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DDTHH:mm:ss" />
              <span class="time-separator">至</span>
              <el-date-picker v-model="endTime" type="datetime" placeholder="结束时间" format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DDTHH:mm:ss" />
            </div> -->
            <el-col :span="8">
              <el-form-item prop="startTime">
                <el-date-picker
                  v-model="formModel.startTime"
                  type="datetime"
                  placeholder="开始时间"
                  format="YYYY-MM-DD HH:mm"
                  value-format="YYYY-MM-DDTHH:mm:ss"
                />
              </el-form-item>
            </el-col>
            <el-col class="text-center" :span="1">
              <span class="time-separator">至</span>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="endTime">
                <el-date-picker
                  v-model="formModel.endTime"
                  type="datetime"
                  placeholder="结束时间"
                  format="YYYY-MM-DD HH:mm"
                  value-format="YYYY-MM-DDTHH:mm:ss"
                />
              </el-form-item>
            </el-col>
          </el-form-item>

          <!-- 活动地点 -->
          <el-form-item label="活动地点" prop="activityLocation">
            <el-input
              class="location_input"
              v-model.trim="formModel.activityLocation"
              placeholder="请输入详细地址"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 底部固定栏 -->
    <div class="editor-footer">
      <div class="footer_content">
        <div class="left">
          <span class="word_count">共{{ plainTextCount }}字</span>
          <button
            v-show="showBackToTopBtn"
            aria-disabled="false"
            type="button"
            class="el_mcm-button el_mcm-button--default is-link btn-position"
            @click="scrollToTop"
          >
            <span class="">
              回到顶部
              <i class="el_mcm-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                  <path
                    fill="currentColor"
                    d="m488.832 344.32-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872 319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0"
                  ></path>
                </svg>
              </i>
            </span>
          </button>
        </div>
        <div class="right">
          <el-button size="large" @click="saveDraft">保存草稿</el-button>
          <el-button type="primary" size="large" @click="createAlumniEvent">立即发布</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// .appMain {
//   padding-top: 64px;
//   background-color: #f5f6f7;

//   overflow: hidden;

//   .content_wrap {}

// }
.hidden_zone {
  position: fixed;
  top: 50%;
  min-height: 130px;
  min-width: 140px;
  left: 0;
}

.editor_toolbar_container {
  min-height: 41px;
  background-color: #fff;

  .editor-toolbar {
    // position: fixed;
    // top: 64px;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    z-index: 100;

    :deep(.w-e-toolbar) {
      justify-content: center;
    }
  }
}

.editor_toolbar_container .slide_down {
  position: fixed;
  top: 0;
  background-color: #fff;
  box-shadow: inset 0 -1px 0 #e3e5e7 !important;
  transition: transform 0.3s ease; // 使用transform实现更流畅的动画
  animation: slideDown 0.3s forwards; // 添加下滑动画
}

// 在样式部分添加
.editor-container {
  .main-content {
    padding: 2.3% 0 100px;
    min-height: 100vh;

    .content-container {
      width: 816px;
      margin: 0 auto;
      background: #fff;
      border-radius: 8px;
      padding: 24px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

      /* .title-input {
        width: 100%;
        border: none;
        font-size: 24px;
        padding: 12px 0;

        &:focus {
          outline: none;
        }
      } */

      .el_mcm-textarea__inner {
        position: relative;
        display: block;
        resize: vertical;
        padding: 5px 11px;
        line-height: 1.5;
        box-sizing: border-box;
        width: 100%;
        font-size: inherit;
        font-family: inherit;
        color: #606266;
        background-color: #fff;
        background-image: none;
        -webkit-appearance: none;
        box-shadow: 0 0 0 1px #dcdfe6 inset;
        border-radius: 4px;
        transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        border: none;

        &:focus {
          outline: none;
          box-shadow: 0 0 0 1px #409eff inset;
        }
      }

      .el_mcm-form-item__content {
        display: flex;
        flex-wrap: wrap;
        // height: 85px;
        margin-left: 0;
        align-items: center;
        flex: 1;
        line-height: 32px;
        position: relative;
        font-size: 14px;
        min-width: 0;

        .pos-box {
          position: relative;
          flex: 1;
          // height: 100%;

          .input__title_pre,
          #txtTitle {
            min-height: 36px;
            line-height: 32px;
            font-size: 23px;
            font-weight: 600;
            word-break: break-all;
            white-space: pre-wrap;
          }

          .input__title_pre {
            visibility: hidden;
            padding-right: 48px;
            padding-bottom: 20px;
            box-sizing: content-box;
          }

          .el_mcm-textarea {
            position: relative;
            display: inline-block;
            width: 100%;
            vertical-align: bottom;
            font-size: 14px;
          }

          .input__title {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            padding: 0 48px 0 0;
            overflow: hidden;
            border: none;
            border-bottom: 1px solid #e8e7e8;

            #txtTitle {
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              padding: 0 48px 0 0;
              overflow: hidden;
              border: none;
              box-shadow: none;
            }
          }

          .title-chk {
            position: absolute;
            right: 0;
            top: 0;
            font-size: 12px;
          }
        }
      }

      .divider {
        border-bottom: 1px solid #e5e5e5;
        margin: 16px 0;
      }

      // 调整编辑器样式
      .editor-content {
        border-radius: 4px;
        min-height: 500px; // 最小高度
        display: flex;
        flex-direction: column;

        // 工具栏样式
        .w-e-toolbar {
          border-bottom: 1px solid #e5e5e5 !important;
          background-color: #fff !important;
          flex-shrink: 0; // 防止工具栏压缩
        }

        // 编辑区样式
        :deep(.w-e-text-container) {
          flex: 1; // 填充剩余空间
          min-height: 500px !important; // 确保编辑区最小高度
          //overflow-y: hidden !important; // 隐藏垂直滚动条
          // overflow-x: hidden!important; //  隐藏水平滚动条

          img,
          table {
            max-width: 100%;
            /* 限制媒体元素宽度 */
            height: auto;
            /* 保持比例 */
            overflow-y: auto;
          }

          .w-e-scroll {
            min-height: 500px;
          }
        }
      }
    }

    .footer_container {
      width: 816px;
      margin: 24px auto 0;
      background: #fff;
      border-radius: 8px;
      padding: 24px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

      .additional_info {
        margin-top: 24px;

        :deep(.el-form-item__label) {
          width: 80px !important;
        }

        :deep(.el-form-item__content) {
          .cover_right {
            flex: 1;
            display: flex;
            max-width: 100%;
            // align-items: center;

            .preview_box {
              width: 170px;
              height: 95px;
              border: 2px dashed #dcdfe6;
              border-radius: 8px;
              cursor: pointer;
              transition: border-color 0.3s;
              display: flex;
              justify-content: center;

              .el-upload {
                width: 100%;
                height: 100%;
              }

              &:hover {
                border-color: #409eff;
              }

              .upload-area {
                position: relative;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                .upload-placeholder {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  // gap: 10px;
                  justify-content: center;
                  color: #8c939d;
                }

                .upload-text {
                  display: block;
                  margin-top: 8px;
                  font-size: 18px;
                }

                .cover-preview {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  border-radius: 6px;
                }
              }
            }

            .img-selection-box:has(.no-data) {
              border-radius: 8px;
              background-color: #f2f2f2;
            }

            .img-selection-box {
              // min-height: 160px;
              max-width: 100%;
              margin-left: 16px;
              flex: 1;
              display: flex;
              align-items: center;
              overflow: hidden;

              .img-selection-list {
                flex: 1;
                display: flex;
                overflow: hidden;
                // flex-wrap: wrap;
                // overflow-x: scroll;
                max-width: 100%;

                .no-data {
                  text-align: center;
                  width: 100%;
                  line-height: 49px;
                  color: #555666;
                  font-size: 12px;
                }

                .img-selection-item {
                  position: relative;
                  margin: 0 8px 8px;
                  border-radius: 4px;
                  overflow: hidden;
                  cursor: pointer;
                  width: 80px;
                  height: 45px;
                  flex-shrink: 0;
                  border: 1px solid rgba(0, 0, 0, 0.1);
                }
              }
            }
          }

          .location_input {
            flex: 0.6;
          }

          .summary_input {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex: 1;

            .summary_input_inner {
              flex: 1;
            }
            .summary_btn {
              margin-left: 10px;
            }
          }
        }

        // .time_range_picker {
        //   flex: 1;
        //   display: flex;
        //   align-items: center;
        //   gap: 12px;
        // }

        .location {
          display: flex;
        }
      }
    }
  }

  .editor-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    display: flex;
    align-items: center;

    .footer_content {
      width: 880px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;

      .left {
        display: flex;
        align-items: center;

        .word_count {
          margin-right: 8px;
          color: #1a1a1a;
        }

        button {
          outline: none;
          cursor: pointer;
        }

        .el_mcm-button {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          line-height: 1;
          white-space: nowrap;
          text-align: center;
          user-select: none;
          vertical-align: middle;
          -webkit-appearance: none;
          border: 1px solid #dedfe6;

          padding: 8px 15px;
          font-size: 14px;
          border-radius: 4px;

          & > span {
            display: inline-flex;
            align-items: center;
            color: #1a1a1a;
            font-size: 16px;
          }
        }

        .el_mcm-button.is-link {
          border-color: transparent;
          color: #606266;
          background: transparent;
          padding: 2px;
          height: auto;
        }

        .btn-position {
          font-size: 16px;
          color: #1a1a1a;
          font-weight: 600;
        }

        .el_mcm-button [class*='el_mcm-icon'] svg {
          vertical-align: bottom;
        }

        .el_mcm-icon svg {
          height: 1em;
          width: 1em;
        }

        .el_mcm-icon {
          --color: inherit;
          height: 1em;
          width: 1em;
          line-height: 1em;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          position: relative;
          fill: currentColor;
          color: inherit;
          font-size: inherit;
        }
      }
    }
  }
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideDown {
  0% {
    top: -64px;
  }

  100% {
    top: 0;
  }
}

@media (max-width: 1279.9px) {
  .right-entry__outside .right-entry-text {
    display: none;
  }

  .bili_header .header__bar .right-entry-item--upload .header-upload-entry {
    width: 34px;

    .header-upload-entry__icon {
      margin-right: 0px;
    }

    .header-upload-entry__text {
      display: none;
    }
  }
}

@media only screen and (max-width: 1439px) {
  .bili_header .header__bar .left_entry .menu_btn .btn-aside-draw {
    display: block !important;
  }
}

.bili_header {
  background-color: #fff;
  min-height: 64px;
  position: relative;
  margin: 0 auto;
  max-width: 2560px;
  width: 100%;

  .header__bar {
    position: absolute;
    top: 0;
    z-index: 1002;
    display: flex;
    background-color: #fff;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    max-width: 2560px;
    width: 100%;
    height: 64px;
    box-shadow: inset 0 -1px 0 #e3e5e7 !important;

    .left_entry {
      flex: 1;
      display: flex;
      align-items: center;

      /* .menu_btn {
        .btn-aside-draw {
          display: none;
          margin-right: 16px;
          width: 18px;
          height: auto;
          cursor: pointer;
        }
      } */

      .logo {
        width: 100px;

        a {
          height: 64px;
          display: block;
          font-size: 0;
          margin-right: 10px;
          background-image: url(../../assets/new11.png);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
        }
      }

      .top-toolbar-box {
        height: 48px;
        padding: 11px 0 12px;
        cursor: pointer;
        display: flex;
        align-items: center;

        .btn-back {
          background: transparent;
          border: none;
          font-size: 24px;
          line-height: 25px;
          cursor: pointer;

          .el_mcm-icon {
            --color: inherit;
            height: 1em;
            width: 1em;
            line-height: 1em;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            position: relative;
            fill: currentColor;
            font-size: inherit;

            svg {
              height: 1em;
              width: 1em;
            }
          }
        }

        .el-icon {
          vertical-align: -4px;
          font-size: 24px;
        }

        .title {
          margin-left: 8px;
          margin-right: 8px;
        }
      }

      .create_center {
        display: flex;
        align-items: center;
        margin-right: 10px;
        margin-left: 5px;
        cursor: pointer;

        .icon-shouye {
          margin-right: 6px;
          font-weight: bold;
        }
      }
    }

    .center_search_container {
      margin: 0 10px;
      height: 38px;

      width: 40%;
      flex-shrink: 0;

      .center-search__bar {
        position: relative;
        margin: 0 auto;
        min-width: 181px;
        max-width: 500px;

        &.is-focus {
          box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
          border-radius: 8px;
        }

        .nav-searchform {
          border-radius: 8px;
          background-color: #f1f2f3;
          display: flex;
          align-items: center;
          padding: 0 48px 0 4px;
          position: relative;
          z-index: 1;
          overflow: hidden;
          line-height: 38px;
          border: 1px solid #e3e5e7;
          height: 40px;
          opacity: 0.9;
          transition: background-color 0.3s;

          /*    &:focus-within {
            border: 1px solid #e3e5e7;
            border-bottom: none;
            background: #fff;
          } */
          &:hover {
            opacity: 1;
            border: 1px solid #e3e5e7;
            background: #fff;
          }

          &.is-focus {
            border: 1px solid #e3e5e7;
            border-bottom: none;
            background: #fff;
            border-radius: 8px 8px 0px 0px;

            .nav-search-content {
              background-color: #e3e5e7;
            }
          }

          .nav-search-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            padding: 0 8px;
            width: 100%;
            height: 32px;
            border: 2px solid transparent;
            border-radius: 6px;

            &:focus {
              background-color: #e3e5e7;
            }

            &:focus-within {
              background-color: #e3e5e7;
            }

            .nav-search-input {
              flex: 1;
              overflow: hidden;
              padding-right: 8px;
              border: none;
              background-color: transparent;
              box-shadow: none;
              color: #61666d;
              font-size: 14px;
              line-height: 20px;

              &:focus {
                outline: none;
                background-color: #e3e5e7;
                color: #000;
              }
            }

            .nav-search-clean {
              width: 16px;
              height: 16px;
              right: 10px;
              cursor: pointer;
              visibility: hidden;

              &:hover svg path {
                fill: #61666d;
              }

              &.has-keyword {
                visibility: inherit;
              }

              svg {
                position: absolute;
                color: #c9ccd0;
              }
            }
          }

          .nav-search-btn {
            position: absolute;
            top: 3px;
            right: 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 0;
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 6px;
            color: #18191c;
            line-height: 32px;
            cursor: pointer;
            transition: background-color 0.3s;

            &:hover {
              background-color: #e3e5e7;
            }
          }
        }

        .search_panel {
          width: 100%;
          max-height: 612px;
          overflow-y: auto;
          background: #fff;
          border: 1px solid #e3e5e7;
          border-top: none;
          border-radius: 0 0 8px 8px;
          padding: 13px 0 16px;
          -webkit-font-smoothing: antialiased;

          .history {
            .header {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 16px;

              .title {
                height: 24px;
                font-size: 16px;
                line-height: 24px;
                color: #18191c;
                font-family: PingFang SC, HarmonyOS_Medium, Helvetica Neue, Microsoft YaHei,
                  sans-serif;
                font-weight: 600;
              }

              .clear {
                font-size: 12px;
                line-height: 15px;
                height: 15px;
                color: #9499a0;
                cursor: pointer;
              }
            }

            .histories-wrap {
              padding: 0 16px;
              overflow: hidden;
              transition: max-height 0.3s ease;

              .histories {
                display: flex;
                flex-wrap: wrap;
                margin-top: 12px;
                margin-right: -10px;
                margin-bottom: 4px;

                .history-item {
                  position: relative;
                  box-sizing: border-box;
                  height: 30px;
                  padding: 7px 10px 8px;
                  font-size: 12px;
                  line-height: 15px;
                  background: #f6f7f8;
                  border-radius: 4px;
                  margin-right: 10px;
                  margin-bottom: 10px;
                  cursor: pointer;

                  &:hover {
                    outline: none;
                    color: #00aeec;

                    .close {
                      display: block;
                    }
                  }

                  .history-text {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 96px;
                  }

                  .close {
                    display: none;
                    box-sizing: border-box;
                    position: absolute;
                    width: 16px;
                    height: 16px;
                    top: -6px;
                    right: -6px;
                    padding: 2px;

                    svg {
                      width: 14px;
                      height: 14px;
                      fill: #ccc;
                    }
                  }
                }
              }
            }

            .history-fold-wrap {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 64px;
              margin: 0 auto 14px;

              &:hover {
                .fold-text {
                  color: #00aeec;
                }

                .fold-icon {
                  fill: #00aeec;
                }
              }

              .fold-text {
                font-size: 12px;
                line-height: 15px;
                height: 15px;
                color: #9499a0;
                cursor: pointer;
              }

              .fold-icon {
                width: 12px;
                height: 12px;
                fill: #9499a0;
                cursor: pointer;
                transform: rotate(180deg);
                margin-left: 2px;
                transition: transform 0.3s;

                &.fold {
                  transform: rotate(0deg);
                }
              }
            }
          }
        }
      }
    }

    .right_entry {
      flex: 1;
      margin-left: 10px;
      margin-right: 25px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .right-entry__outside {
        display: flex;
        align-items: center;
        flex-direction: column;
        flex-shrink: 0;
        margin-right: 0;
        min-width: 50px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;

        .right-entry-icon:hover {
          animation: jump 0.3s;
        }

        .right-entry-text {
          color: #61666d;
        }
      }

      .v-popover-wrap {
        position: relative;

        /* 显示时的状态 */
        &:hover .v-popover {
          opacity: 1;
          transform: translate3d(-50%, 0, 0);
          /* 最终位置 */
        }

        &:hover .v-popover-content {
          transform: translateY(0);
          /* 取消微调 */
        }

        .red-num--message {
          position: absolute;
          top: -6px;
          left: 25px;
          z-index: 1;
          padding: 0 3px;
          min-width: 15px;
          border-radius: 10px;
          background-color: #fa5a57;
          color: #fff;
          font-size: 12px;
          line-height: 15px;
        }
      }

      .v-popover {
        position: absolute;
        top: 100%;
        left: 50%;
        // transition: .3s;
        z-index: 1;
        // transform: translate3d(-50%, 0, 0);

        transform: translate3d(-50%, 10px, 0);
        /* 初始位置下移 10px */
        transition: all 0.3s ease;
        /* 过渡效果 */
        // pointer-events: none;
        /* 防止鼠标事件干扰 */

        .v-popover-content {
          position: relative;
          background-color: #fff;
          box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
          border-radius: 8px;
          border: 1px solid #e3e5e7;
          color: #18191c;

          transform: translateY(-5px);
          /* 初始微调 */
          transition: inherit;
          /* 继承父级过渡 */
        }
      }

      .avatar-popover-is-bottom {
        padding-top: 12px;
        margin-left: -12px;

        &:hover {
          // background-color: pink;
        }
      }

      .message-popover-is-bottom {
        padding-top: 15px;
        margin-left: 0px;
      }

      .moment-popover-is-bottom {
        padding-top: 15px;
        margin-left: 0px;
      }

      .header-avatar-wrap {
        position: relative;
        box-sizing: content-box;
        padding-right: 10px;
        width: 50px;
        height: 50px;
        cursor: pointer;

        .header-avatar-wrap--container {
          position: relative;
          z-index: 2;

          .bili-avatar {
            box-sizing: content-box;
            border: 2px solid #fff;
          }
        }

        //小头像
        .header-entry-mini {
          background-color: pink;
          position: absolute;
          top: 5px;
          left: 10px;
          z-index: 2;
          display: block;
          width: 38px;
          height: 38px;
          border-radius: 50%; // 圆形
          animation: fadeOut 0.3s both;

          img {
            border: 2px solid #fff;
            border-radius: 50%;
            object-fit: inherit;
          }
        }

        //大头像
        .header-entry-avatar {
          position: absolute;
          top: 5px;
          left: 10px;
          z-index: 2;
          display: block;
          border-radius: 50%;
          transform-origin: top left;
        }

        @keyframes fadeIn {
          0% {
            opacity: 0;
          }

          100% {
            opacity: 1;
          }
        }

        @keyframes fadeOut {
          0% {
            opacity: 1;
          }

          100% {
            opacity: 0;
          }
        }

        @keyframes avatarFadeSmall {
          0% {
            transform: scale(1) translate(-36px, 10px);
          }

          60% {
            opacity: 1;
          }

          100% {
            opacity: 0;
            transform: scale(0.4) translateY(-2px) translate(3px);
          }
        }

        @keyframes avatarFadeLarge {
          0% {
            opacity: 0;
            transform: scale(0.4) translateY(-2px) translate(3px);
          }

          30% {
            opacity: 1;
          }

          100% {
            opacity: 1;
            transform: scale(1) translate(-36px, 10px);
          }
        }

        .mini-avatar--small .header-entry-mini {
          animation: fadeIn 0.6s both;
        }

        .mini-avatar--small .header-entry-avatar {
          animation: avatarFadeSmall 0.35s both;
        }

        .mini-avatar--large .header-entry-mini {
          animation: fadeOut 0.3s both;
        }

        .mini-avatar--large .header-entry-avatar {
          animation: avatarFadeLarge 0.35s both;
        }
      }

      .avatar-panel-popover {
        padding: 0 24px 18px;
        width: 300px;
        border-radius: 8px;
        background-color: #fff;

        .avatar-top-space {
          height: 35px; // 留出顶部空间
          margin-bottom: 10px;
        }

        .user-nickname {
          text-align: center;
          font-size: 18px;
          font-weight: 550;
          margin-bottom: 10px;
          color: #18191c;
        }

        .links-item {
          list-style: none;
          padding: 0;
          margin: 0;

          .single-link-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 2px;
            padding: 0 14px;
            height: 38px;
            border-radius: 8px;
            color: #61666d;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s;
            white-space: nowrap;

            &:hover {
              background-color: #e3e5e7;
            }

            .link-title {
              display: flex;
              align-items: center;

              .link-icon {
                margin-right: 16px;
              }

              .icon-huodong_huodongguanli {
                margin-right: 16px;
                font-size: 19px;
              }

              .icon-wodebaoming1 {
                color: #61666d;
                margin-right: 5px;
                font-size: 29px;
                transform: translateX(-3px);
              }
            }

            .link-icon--right {
              transform: rotate(-90deg);
            }
          }

          .split-line {
            margin: 10px 0;
            width: 100%;
            height: 1px;
            background: #e3e5e7;
          }

          .logout-item {
            display: flex;
            align-items: center;
            padding: 10px 14px;
            border-radius: 8px;
            color: #61666d;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s;

            &:hover {
              background-color: #e3e5e7;
            }

            .link-icon {
              margin-right: 16px;
            }
          }
        }
      }
    }

    .right-entry--message {
      position: relative;

      .red-num--message {
        position: absolute;
        top: -6px;
        left: 25px;
        z-index: 1;
        padding: 0 3px;
        min-width: 15px;
        border-radius: 10px;
        background-color: #fa5a57;
        color: #fff;
        font-size: 12px;
        line-height: 15px;
      }

      .message-entry-popover {
        overflow: hidden;
        width: 142px;
        border-radius: 8px;

        .message-inner-list {
          display: flex;
          flex-direction: column;
          padding: 12px 0;

          .message-inner-list__item {
            position: relative;
            display: flex;
            align-items: center;
            padding: 10px 0 10px 27px;
            color: #61666d;
            text-align: left;
            font-size: 14px;
            transition: background-color 0.3s;

            &:hover {
              background-color: #e3e5e7;
            }

            .message-inner-list__item--num {
              position: absolute;
              right: 17px;
              padding: 0 5px;
              border-radius: 8px;
              background: #fa5a57;
              color: #fff;
              font-size: 12px;
              line-height: 16px;
            }
          }
        }
      }

      .dynamic-panel-popover {
        width: 370px;
      }
    }

    .right-entry-item {
      display: block;
      flex-shrink: 0;
      margin-right: 4px;
      min-width: 50px;
      text-align: center;
      // background-color: pink;

      .right-entry-icon {
        color: #18191c;
      }

      .icon-fabuzhongxin_gongzuotai {
        display: inline-block;
        vertical-align: top;
        margin-bottom: -7px;
        margin-top: -6px;
        font-size: 23px;
      }

      // .publish-text {
      //   color: #61666d;
      // }
    }

    .right-entry-item--upload {
      margin: 0;
      min-width: 0;
    }

    .header-upload-entry {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 16px;
      width: 90px;
      height: 34px;
      border-radius: 8px;
      background-color: rgba(0, 174, 236);
      color: #fff;
      text-align: center;
      font-size: 14px;
      line-height: 20px;
      cursor: pointer;
      transition: background-color 0.3s;

      &:hover {
        background-color: rgba(0, 199, 254);
      }

      .header-upload-entry__icon {
        margin-right: 5px;
        color: #fff;
      }
    }
  }
}

.bili-avatar {
  display: block;
  position: relative;
  background-image: url();
  background-size: cover;
  border-radius: 50%;
  margin: 0;
  padding: 0;

  width: 82px;
  height: 82px;
  transform: translate(0px, 0px);

  .bili_avatar_img {
    top: 0;
    left: 0;
    transform: translateZ(0);
    will-change: transform;
    border-radius: 50%;
    border: none;
    display: block;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

.bili_header .slide_down {
  position: fixed;
  top: 0;
  background-color: #fff;
  box-shadow: inset 0 -1px 0 #e3e5e7 !important;
  transition: transform 0.3s ease; // 使用transform实现更流畅的动画
  animation: slideDown 0.3s forwards; // 添加下滑动画
}
</style>

<style lang="scss">
/* 调整预览图片大小（保持比例） */
.el-image-viewer__img {
  width: 60% !important;
  /* 按需调整百分比 */
  height: auto !important;
}
</style>
